<template>
    <div class="chang">
        <div class="weidao">
        <van-icon name="arrow-left" class="weidao1" @click="dianss"/>
        <div class="weidao2">华硕ASUS企业采购</div>
        <van-icon name="ellipsis" class="weidao3" />
        </div>
        <div class="changtp">
            <img :src="img11[0]" alt="">
            <img :src="img11[1]" alt="">
        </div>
        <div>
            <div class="weichang"><img src="https://static.asus.com.cn/store/20230113/16401299545649.jpg" alt=""></div>
            <div class="changs">
                <div v-for="(v,index) in data11" :key="index" class="imhsszz">
                <img :src="v.myimg" alt="">
                <p>{{v.urname}}</p>
                <p>{{v.introduce}}</p>
                <div class="zengpp">赠品</div>
                <p>￥{{v.moeny}}</p>
                <p>￥{{v.before}}</p>
                <div class="qiangg">立即抢购</div>
            </div>
            </div>
        </div>
        <div>
            <div class="weichang"><img src="https://static.asus.com.cn/store/20230113/16411598485052.jpg" alt=""></div>
            <div class="changs">
                <div v-for="(v,index) in data11" :key="index" class="imhsszz">
                <img :src="v.myimg" alt="">
                <p>{{v.urname}}</p>
                <p>{{v.introduce}}</p>
                <div class="zengpp">赠品</div>
                <p>￥{{v.moeny}}</p>
                <p>￥{{v.before}}</p>
                <div class="qiangg">立即抢购</div>
            </div>
            </div>
        </div>
        <div>
            <div class="weichang"><img src="https://static.asus.com.cn/store/20230113/16415110256985.jpg" alt=""></div>
            <div class="changs">
                <div v-for="(v,index) in data11" :key="index" class="imhsszz">
                <img :src="v.myimg" alt="">
                <p>{{v.urname}}</p>
                <p>{{v.introduce}}</p>
                <div class="zengpp">赠品</div>
                <p>￥{{v.moeny}}</p>
                <p>￥{{v.before}}</p>
                <div class="qiangg">立即抢购</div>
            </div>
            </div>
        </div>
        <div class="changtp">
            <img :src="img11[2]" alt="">
        </div>
        <div>
            <div class="weichang"><img src="https://static.asus.com.cn/store/20220902/16000048974899.jpg" alt=""></div>
            <div class="changs">
                <div v-for="(v,index) in data11" :key="index" class="imhsszz">
                <img :src="v.myimg" alt="">
                <p>{{v.urname}}</p>
                <p>{{v.introduce}}</p>
                <div class="zengpp">赠品</div>
                <p>￥{{v.moeny}}</p>
                <p>￥{{v.before}}</p>
                <div class="qiangg">立即抢购</div>
            </div>
            </div>
        </div>
        <div class="changtp">
            <img :src="img11[3]" alt="">
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            data11:"",
            data22:"",
            data33:"",
            data44:"",
            img11:""
        }
    },
    methods:{
        dianss(){
            this.$router.push("/shouye")
        }
    },
    mounted(){
      this.$http({
            url:"http://localhost:3000/navigation4",
            method:"get"
      }).then(res=>{
            this.data11 = res.data[0].data.data1;
            this.data22 = res.data[0].data.data2;
            this.data33 = res.data[0].data.data3;
            this.data44 = res.data[0].data.data4;
            this.img11 = res.data[0].data.img;    
            console.log(res.data);  
      })  
  }
}
</script>

<style scoped>
.weidao1{
    font-size: 7vw;
    margin: 3vw 2vw 2vw 2vw;
}
.weidao2{
    flex-grow: 1;
    text-align: center;
    line-height: 13vw;
}
.weidao3{
    font-size: 7vw;
    margin: 3vw 2vw 2vw 2vw;
}
.weidao{
    display: flex;
    width: 100vw;
    height: 13vw;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #e8e8e8;
}
.qiangg{
    padding: 1vw;
    width: 7vw;
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    color: #Fff;
    background-color: #F9453D;
    border-radius: 3px;
    font-size: 3.5vw;
}
.zengpp{
    width: 10vw;
    /* border: 1px solid #F5A623; */
    color: #Fff;
    background-color: #F5A623;
    padding: 0.5vw;
    border-radius: 3px;
    text-align: center;
    font-size: 3vw
}
.imhsszz p:nth-child(2){
    font-size: 4vw;
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.imhsszz p:nth-child(3){
    font-size: 3vw;
    opacity: 0.5;
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.imhsszz p:nth-child(5){
    font-size: 4vw;
    color: coral;
}
.imhsszz p:nth-child(6){
    font-size: 2vw;
    opacity: 0.5;
    text-decoration: line-through;
}
.imhsszz img{
    width: 42vw;
}
.imhsszz{
    width: 42vw;
    margin-left: 3.1vw;
    padding: 1.5vw;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 2vw;
    position: relative;
}

.changs{
    display: flex;
    flex-wrap: wrap;
    
}
.weichang img{
    width: 100vw;
}
.chang{
    background-color: rgb(182, 214, 253);
}
.changtp img{
    width: 100vw;
}
.changtp{
    margin-top:13vw
}
</style>